<template>
    <div class="Footer fixed">
        <router-link active-class="active" to="/product" class="page home">
            <van-icon name="wap-home-o" size="18" />
            <p>首页</p>
        </router-link>
        <router-link active-class="active" to="/type" class="page categery">
            <van-icon name="apps-o" size="18" />
            <p>分类</p>
        </router-link>
        <router-link active-class="active" to="/cart" class="page cart-page">
            <van-icon name="shopping-cart-o" size="18" />
            <p>购物车</p>
        </router-link>
        <router-link active-class="active" to="/my" class="page my">
            <van-icon name="user-o" size="18" />
            <p>我的</p>
        </router-link>
        <router-link active-class="active" to="/demo" class="page my">
            <van-icon name="user-o" size="18" />
            <p>demo</p>
        </router-link>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="less">
.aa {
    color: blue;
}

.Footer {
    display: flex;
    height: 50px;
    width: 100vw;
    justify-content: space-around;
    background-color: white;
}

.active {
    color: #c03d37;
}

.fixed {
    position: fixed;
    bottom: 0px;
}

.page {
    text-align: center;
    padding-top: 5px;
}

.page>p {
    font-size: 12px;
    margin: 5px 0 0 0;
}
</style>